<template>
  <div>
    <el-dialog top="5vh" :title="title" :visible.sync="visible" :width="width + 'px'"
               :before-close="onClose" :close-on-click-modal="false">
      <div class="container" :style="{height:height+'px'}">
        <slot name="content"></slot>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClose">取 消</el-button> <el-button type="primary" @click="onConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        name: "systemDialog",
        props: {
            title: {type: String, default: "标题"},
            visible: {type: Boolean, default: false},
            width: {type: Number, default: 600},
            height: {type: Number, default: 250}
        },
        data() {
            return {

            }
        },
        methods: {
            onClose() {
                this.$emit("onClose")
            },
            onConfirm() {
                this.$emit("onConfirm")
            }
        }
    }
</script>

<style lang="scss" scoped>
  .container {
    overflow-x: initial;
    overflow-y: auto;
  }

  .el-dialog__wrapper {
    ::v-deep .el-dialog {
      border-top-left-radius: 7px !important;
      border-top-right-radius: 7px !important;

      .el-dialog__header {
        border-top-left-radius: 7px !important;
        border-top-right-radius: 7px !important;
        background-color: #1890ff;

        .el-dialog__title {
          color: #fff;
          font-size: 15px;
          font-weight: 700;
        }

        .el-dialog__close {
          color: #fff;
        }
      }

      .el-dialog__body {
        padding: 10px 10px !important;
      }

      .el-dialog__footer {
        border-top: 1px solid #e8eaec !important;
        padding: 10px !important;
      }
    }
  }
</style>
